<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="content">{{detail?detail.name:'拼团详情'}}</block>
		</cu-custom>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="cu-bar fixed" :class="scrollTop > 300?'bg-white':'vtop'" :style="[{height:CustomBar + 'px'}]">
			<view class="action " @tap="BackPage">
				<text class="cuIcon cuIcon-back"></text>
			</view>
			<view class="content ">
				商品详情
			</view>
			<view class="action">
				<text class="cuIcon cuIcon-share" @tap="showShare" v-if="!error && detail"></text>
				<text class="cuIcon cuIcon-more" @tap="showFastModal"></text>
			</view>
		</view>
		<!-- #endif -->
		<block v-if="error">
			<view class="text-center errorview">
				<view>
					<view class="text-gray text-lg">订单信息有误</view>
					<view class="cu-btn round margin-top" :class="'line-'+theme">返回</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="product-swiper relative" :style="'height:'+swiperHeight+'px;'">
				<!-- #ifdef MP-WEIXIN -->
				<view class="absolute vtop">
					<view class="action">
						<button class="sharebtn" open-type="share" v-if="!error && detail">
							<text class="cuIcon cuIcon-share"></text>
						</button>
						<text class="cuIcon cuIcon-more margin-left" @tap="showFastModal"></text>
					</view>
				</view>
				<!-- #endif -->
				<swiper class="screen-swiper" :indicator-dots="false" :autoplay="true" interval="5000" duration="500" @change="swiperChannelHandle"
				 v-if="detail" :style="'height:'+swiperHeight+'px;'">
					<swiper-item v-for="(item,index) in detail.wholesaleProduct.covers" :key="index">
						<image :src="item" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
				<view class="absolute swiper-dot-view text-white" v-if="detail">
					{{swiperCurrent+1}}/{{detail.wholesaleProduct.covers.length}}
				</view>
			</view>
			<view class="padding-sm  space-between align-center bg-orange" v-if="detail">
				<view>
					<text class="text-price text-white text-xxl">{{detail.wholesaleProduct.type==0?detail.wholesaleProduct.product.wholesale_price:detail.wholesaleProduct.wholesale_price}}</text>
					<text class="cu-tag line-white sm margin-left-sm round">{{detail.wholesaleProduct.num}}人团</text>
				</view>
				<view class="cuIcon cuIcon-share default" @tap="showShare"></view>
			</view>
			<view class="bg-white padding-tb">
				<view class="margin-lr  text-lg product-name" v-if="detail">
					{{detail.wholesaleProduct.type==0?detail.wholesaleProduct.product.name:detail.wholesaleProduct.title}}
				</view>
				<view class="margin-lr margin-top-xs flex justify-start align-center" v-if="detail">
					<text class="text-gray">截止时间：</text>
					<view class="text-orange" v-if="detail && detail.close_time>0">
						<CountDown :value="detail.close_time" :skin="'skin3'" :beforTxt="''"></CountDown>
					</view>
				</view>
			</view>


			<block v-if="detail && detail.wholesaleProduct.type == 0&&detail.wholesaleProduct.product.merchant">
				<view class="bg-white space-between padding margin-top align-center" @tap="goStore(detail.wholesaleProduct.product.merchant)">
					<view class="cu-avatar default-bg lg round">
						<image :src="detail.wholesaleProduct.product.merchant.logo" mode="aspectFill"></image>
					</view>
					<view class="w100 margin-left-sm">
						<view class="text-lg">{{detail.wholesaleProduct.product.merchant.title}}</view>
						<view class="cu-tag sm margin-top-xs">
							<text v-if="detail.wholesaleProduct.product.merchant.type==2">供应商</text>
							<text v-else>店铺</text>
						</view>
					</view>
					<view class="cuIcon cuIcon-right"></view>
				</view>
				<view class="bg-white space-between padding solid-top align-center" @tap="showLocation">
					<view class="w100 margin-left-sm">
						<text class="cuIcon cuIcon-location"></text>
						<text>{{detail.wholesaleProduct.product.merchant.address_details}}</text>
					</view>
					<view>
						<text>{{mathLange}}</text>
						<text class="cuIcon cuIcon-right"></text>
					</view>
				</view>
			</block>

			<view class="cu-list menu margin-top">
				<view class="cu-item arrow">
					<view class="content text-bold w100 " style="min-width: 200rpx;">
						<text class="text-sm">拼团玩法</text>
					</view>
					<view class="action  text-left w100 text-gray">
					</view>
				</view>
				<view class="bg-white overflow">
					<view class="bg-red light margin padding flex justify-between align-center">
						<view>参与拼团</view>
						<view class="cuIcon cuIcon-right"></view>
						<view>{{detail?detail.wholesaleProduct.num:0}}人成团</view>
						<view class="cuIcon cuIcon-right"></view>
						<view>
							<view>拼中发货</view>
							<view>未拼中退款</view>
						</view>
						<view class="cuIcon cuIcon-right"></view>
						<view>
							<view>未拼中奖励</view>
							<view><text class="text-price text-xl text-bold">{{detail?detail.wholesale_reward:'0'}}</text>元红包</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white margin-top-sm" v-if="detail">
				<view class="cu-bar">
					<view class="action text-bold">当前进度（{{detail?detail.join_num:0}}/{{detail?detail.num:0}}）</view>
					<view class="action" v-if="detail">
						<text v-if="detail.state == 1">待开奖</text>
						<text v-if="detail.state == 2">已开奖</text>
						<text v-if="detail.state == 3">失败</text>
					</view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item" v-if="detail && detail.member">
						<view class="cu-avatar lg round bg-white">
							<image :src="detail.member.head_portrait" mode="aspectFill"></image>
						</view>
						<view class="content ">
							<view class="text-overflow w100">{{detail.member.nickname}}</view>
							<view class="text-gray margin-top-xs">开团时间：{{$common.timeFormat(detail.created_at)}}</view>
						</view>
						<view class="action">
							<text class="cu-tag bg-orange margin-right-sm sm">团长</text>
						</view>
					</view>
					<view class="cu-item" v-for="(item,index) in detail.logs" :key="index" v-if="detail">
						<view class="cu-avatar lg round bg-white">
							<image :src="item.member.head_portrait" mode="aspectFill"></image>
						</view>
						<view class="content ">
							<view class="text-overflow w100">{{item.member.nickname}}</view>
							<view class="text-gray margin-top-xs">参团时间：{{$common.timeFormat(item.created_at,'YYYY-MM-DD')}}</view>
						</view>
						<view class="action" v-if="detail.state==2">
							<text class="cu-tag bg-red margin-right-sm sm" v-if="item.is_win == 1">中奖</text>
							<text class="cu-tag bg-gray margin-right-sm sm" v-else>未中奖</text>
						</view>
					</view>
					<view class="cu-item" v-for="(item,index) in detail.robots" :key="index" v-if="detail.robots.length > 0">
						<view class="cu-avatar lg round bg-white">
							<image :src="item.url" mode="aspectFill"></image>
						</view>
						<view class="content ">
							<view class="text-overflow w100">{{item.name}}</view>
							<view class="text-gray margin-top-xs">参团时间：{{$common.timeFormat(detail.created_at,'YYYY-MM-DD')}}</view>
						</view>
						<view class="action" v-if="detail.state==2">
							<text class="cu-tag bg-gray margin-right-sm sm">未中奖</text>
						</view>
					</view>
				</view>
			</view>

			<view class="bg-white margin-top">
				<view class="overflow">
					<view class="text-center margin-tb text-lg text-black">—— 商品详情 ——</view>
					<view class="content" v-if="detail">
						<rich-text :nodes="detail.wholesaleProduct.content"></rich-text>
					</view>
				</view>
			</view>

			<view class="main-ctr">
				<view class="blackbg round  text-white" @tap="onTop" v-if="scrollTop > 300">
					<text class="cuIcon-top"></text>
				</view>
			</view>

			<view class="cu-bar bg-white tabbar  shop  foot" v-if="detail">
				<view class="action text-black" @tap="goPage('/pages/shop/index')">
					<view class="cuIcon-home"></view> 首页
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button class="action" open-type="contact">
					<view class="cuIcon-service text-black">
						<!-- <view class="cu-tag badge"></view> -->
					</view>
					客服
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<button class="action" @tap="openServiceModal">
					<view class="cuIcon-service text-black">
						<!-- <view class="cu-tag badge"></view> -->
					</view>
					客服
				</button>
				<!-- #endif -->

				<view class="bg-gray submit" v-if="detail && detail.member_id == member.id">我是团长</view>
				<view class="bg-blue submit" @tap="goJoinWholesale" v-else-if="detail && detail.wholesale_join_rule == 1">去参团</view>
				<view class="bg-gray submit" v-else>权限不足</view>
			</view>
		</block>



		<view class="cu-modal bottom-modal" :class="modalName=='joinModal'?'show':''" @tap="modalName=''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请选择支付方式</view>
					<view class="action" @tap="hideModal">
						取消
					</view>
				</view>
				<view class="bg-white overflow text-left">
					<view class="  ">
						<view class="margin-lr-xl" v-if="member">
							<view class="space-between solid-bottom padding-tb-sm align-center" @tap="PaymentBingChange('wechat')">
								<view class="cu-avatar bg-white">
									<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/images/h5/icon-wechat.png" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">微信支付</view>
									<view class="text-gray text-sm">推荐使用微信支付</view>
								</view>
								<view class="">
									<radio :class="payment=='wechat'?'checked':''" :checked="payment=='wechat'?true:false" value="wechat"></radio>
								</view>
							</view>
							<view class="space-between  padding-tb-sm align-center" @tap="PaymentBingChange('default')">
								<view class="cu-avatar bg-white">
									<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/icon-menu-2.png" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">余额支付</view>
									<view class="text-gray text-sm">可用余额 <text v-if="member.account" class="margin-left-sm text-red">{{member.account.user_money}}</text></view>
								</view>
								<view class="">
									<radio :class="payment=='default'?'checked':''" :checked="payment=='default'?true:false" value="default"></radio>
								</view>
							</view>
							<view class="space-between  padding-tb-sm align-center" @tap="PaymentBingChange('frozen')">
								<view class="cu-avatar bg-white">
									<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/icon-menu-2.png" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">本金余额支付</view>
									<view class="text-gray text-sm">可用本金余额 <text v-if="member.account" class="margin-left-sm text-red">{{member.account.frozen_money}}</text></view>
								</view>
								<view class="">
									<radio :class="payment=='frozen'?'checked':''" :checked="payment=='frozen'?true:false" value="frozen"></radio>
								</view>
							</view>
							<view class="w100 margin-tb-xl">
								<view class="cu-btn bg-blue xl round w100" @tap="onSubmit">确定支付</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="modalName=='wholesaleModal'?'show':''" @tap="modalName=''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white justify-end">
					<view class="content">发起拼购</view>
					<view class="action" @tap="hideModal">
						取消
					</view>
				</view>
				<view class="bg-white padding-bottom">
					<view class="cu-bar margin-lr">
						<view class="title text-bold">订单商品</view>
					</view>
					<view class="space-between padding-lr">
						<view class="cu-avatar lg bg-white">
							<image :src="detail?detail.picture:''" mode="aspectFill"></image>
						</view>
						<view class="w100 margin-left">
							<view class="text-overflow text-left">{{detail?detail.name:'-'}}</view>
							<view class="space-between magin-top-xs">
								<text class="text-price text-orange">{{detail?detail.wholesale_price:'-'}}</text>
								<text>x1</text>
							</view>
						</view>
					</view>
					<view class="padding-lr text-left margin-top">
						<view class="text-bold margin-bottom-sm"><text class="cuIcon cuIcon-info"></text>发起说明</view>
						<view>团长发起拼团并在成团之后的抽奖中不会被抽中，从而获得相应奖励</view>

						<view class="margin-top cu-btn bg-blue lg round w100" @tap="applyWholesale">
							立即发起
						</view>
					</view>
				</view>
			</view>
		</view>

		<wholesaleModal ref="wholesaleModal" v-on:submitJoinWholesale="submitJoinWholesale"></wholesaleModal>
		<couponModal ref="couponModal"></couponModal>

		<goodsModal ref="goodsModal" v-on:cartNumChange="cartNumChange" :marketingType="'wholesale'"></goodsModal>
		<ShareView ref="ShareView"></ShareView>
		<serviceView ref="serviceView"></serviceView>
		<fastLink ref="fastLink"></fastLink>
		<Foot></Foot>
	</view>
</template>

<script>
	import wholesaleModal from '@/components/shop/marketing/wholesaleModal.vue'
	import CountDown from '@/components/default/CountDown.vue'
	import fastLink from '@/components/shop/fastLink.vue'
	import guessYouLikeView from '@/components/shop/marketing/guessYouLikeView.vue'
	import couponModal from '@/components/shop/marketing/couponModal.vue'
	import goodsModal from '@/components/shop/goodsModal.vue'
	import serviceView from '@/components/default/serviceView.vue'
	import ShareView from '@/components/default/ShareView.vue'
	import Foot from '@/components/default/foot.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			wholesaleModal,
			CountDown,
			fastLink,
			guessYouLikeView,
			goodsModal,
			couponModal,
			ShareView,
			serviceView,
			Foot,
		},
		computed: {
			...mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
			mathLange() {
				var merchant = this.detail.wholesaleProduct.product.merchant
				let location = this.$common.getCache('location')
				console.log(location)
				if (location && merchant && merchant.latitude && merchant.longitude) {
					var lat1 = location.latitude
					var lat2 = merchant.latitude
					var lng1 = location.longitude
					var lng2 = merchant.longitude
		
					console.log(123)
					var radLat1 = lat1 * Math.PI / 180.0;
					var radLat2 = lat2 * Math.PI / 180.0;
					var a = radLat1 - radLat2;
					var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
					var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
						Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
					s = s * 6378.137; // EARTH_RADIUS;
					s = Math.round(s * 10000) / 10000;
					return s.toFixed(1) + 'km';
				} else return ''
			}
		},
		data() {
			return {
				id: 0,
				wholesale_id: 0,
				config: null,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				detail: null,
				swiperHeight: 0,
				swiperCurrent: 0,
				modalName: '',
				scrollTop: 0,
				cartNum: 0,
				error: false,
				member: null,
				robots: [],


				payment: 'wechat',
				payLoading: false,
				log: null,
			};
		},
		onShow() {
			this.$common.getCartNum().then((num) => {
				this.cartNum = num
			})
			this.$common.getMember().then((member) => {
				this.member = member
			})
		},
		onLoad(option) {
			this.id = option.id
			this.wholesale_id = option.wholesale_id
			if (!this.id || !this.wholesale_id) {
				this.$common.showErrorModal('参数有误')
			}
			if (option.share_id) {}
			this.$common.getConfig().then((config) => {
				this.config = config
				this.$nextTick(function() {
					uni.startPullDownRefresh({})
				})
			})
			this.swiperHeight = this.windowWidth
		},
		onReady() {},
		methods: {
			swiperChannelHandle(e) {
				this.swiperCurrent = e.detail.current
			},
			openCouponModal() {
				this.$refs.couponModal.show()
			},
			openGoodsModal() {
				this.$refs.goodsModal.show()
			},
			getProduct() {
				this.$http
					.get('marketing_wholesale_view', {
						id: this.wholesale_id,
					})
					.then((response) => {
						uni.stopPullDownRefresh()
						var detail = response.data.data

						if (detail.wholesaleProduct.type == 0) {
							detail.wholesaleProduct.covers = detail.wholesaleProduct.product.covers
							detail.wholesaleProduct.content = detail.wholesaleProduct.product.intro
						}
						detail.wholesaleProduct.content = this.$common.mathRichText(detail.wholesaleProduct.content)
						this.detail = detail

						// if (this.detail.canReceiveCoupon && this.detail.canReceiveCoupon.length > 0)
						// 	this.$refs.couponModal.setData(this.detail.canReceiveCoupon)


						if (this.detail.wholesaleProduct.type == 0) {
							var product = this.detail.wholesaleProduct.product
							product.wholesale = this.detail
							product.wholesaleProduct = this.detail.wholesaleProduct
							this.$refs.goodsModal.setData(product)
						}
					})
					.catch((response) => {
						console.log(response)
						uni.stopPullDownRefresh()
						this.error = true
					})
			},
			goJoinWholesale() {
				if (this.detail.wholesaleProduct.type == 0) {
					this.$refs.goodsModal.setWholesaleid(this.wholesale_id)
					this.$refs.goodsModal.buy('buy_now')
					// this.$refs.wholesaleModal.joinWholesale(id)
				} else {
					this.modalName = 'joinModal'
				}
			},
			submitJoinWholesale(id) {
				this.$refs.goodsModal.show(id)
			},
			openServiceModal() {
				this.$refs.serviceView.show()
				// window.open('https://uclient.yunque360.com/frame.html?company_id=cjch051hm27mtl')
				// (function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/647cfb665881c5ee62274c0e78aaad3b0/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();
			},
			showShare() {
				if (this.detail) {
					this.$refs.ShareView.show({
						type: 'wholesale',
						id: this.detail.id,
						thumb: this.detail.wholesaleProduct.type == 0 ? this.detail.wholesaleProduct.product.picture : this.detail.wholesaleProduct
							.picture,
						name: this.detail.wholesaleProduct.type == 0 ? this.detail.wholesaleProduct.product.name : this.detail.wholesaleProduct
							.title,
						price: this.detail.wholesaleProduct.type == 0 ? this.detail.wholesaleProduct.product.wholesale_price : this.detail
							.wholesaleProduct.wholesale_price,
						share_url: this.detail.share_url,
						member_id: this.member.id,
						member_name: this.member.nickname,
						member_head: this.member.head_portrait,
						wholesale_id: this.wholesale_id,
						reget: true
					})
				}
			},
			PaymentBingChange(e) {
				this.payment = e
			},
			applyWholesale() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http
					.post('marketing_wholesale_apply', {
						id: this.detail.wholesaleProduct.id,
					})
					.then((response) => {
						uni.hideLoading()
						this.$common.showSuccess('开团成功')
					})
					.catch((response) => {
						uni.hideLoading()
					})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			showFastModal() {
				this.$refs.fastLink.show()
			},
			onTop: function(e) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			BackPage() {
				uni.navigateBack({})
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop
			},
			cartNumChange(n) {
				this.cartNum = n
			},

			onSubmit() {
				if (this.payLoading) return
				this.payLoading = true
				this.$http.post('marketing_wholesale_join', {
						wholesale_id: this.wholesale_id
					})
					.then((response) => {
						this.log = response.data.data
						this.payOnSubmit()
					})
					.catch((response) => {
						this.payLoading = false
					})

			},
			payUserMoney(frozen) {
				this.payLoading = true
				this.$http.post('pay', {
						pay_type: 5,
						order_group: "wholesale",
						frozen: frozen,
						data: JSON.stringify({
							"log_id": this.log.id
						})
					})
					.then((response) => {
						this.loading = false
						uni.hideLoading()
						console.log(response)
						this.$common.showSuccess('支付成功', (res) => {
							this.$common.rmCache('member')
							uni.redirectTo({
								url: "/pages/member/wholesale/detail?id=" + this.wholesale_id
							})
						})
					})
					.catch((response) => {
						this.loading = false
						uni.hideLoading()
						console.log(response)
						this.loading = false
						this.payLoading = false
					})
			},
			payOnSubmit() {
				let _this = this
				if (this.payment == 'frozen') {
					if (parseFloat(this.member.account.frozen_money) < parseFloat(this.log.pay_money)) {
						this.$common.showError('余额不足')
						return
					}
					this.payLoading = true
					uni.showModal({
						title: '是否确定支付订单，将扣除本金余额￥' + this.log.pay_money,
						success(res) {
							if (res.confirm) {
								_this.payUserMoney(1)
							} else {
								_this.payLoading = false
							}
						},
						fail() {
							_this.payLoading = false
						}
					})
				} else if (this.payment == 'default') {
					if (parseFloat(this.member.account.user_money) < parseFloat(this.member.pay_money)) {
						this.$common.showError('余额不足')
						return
					}
					this.payLoading = true
					uni.showModal({
						title: '是否确定支付订单，将扣除余额￥' + this.log.pay_money,
						success(res) {
							if (res.confirm) {
								_this.payUserMoney(0)
							} else {
								_this.payLoading = false
							}
						},
						fail() {
							_this.payLoading = false
						}
					})
				} else if (this.payment == 'wechat') {
					this.payLoading = true
					// #ifdef MP-WEIXIN
					this.mini_pay(this.id)
					// #endif

					// #ifdef H5
					this.$jwx.createPay('wholesale', {
							"log_id": this.log.id
						}).then((response) => {
							this.$common.showSuccess('支付成功', (r) => {
								uni.redirectTo({
									url: "/pages/member/wholesale/detail?id=" + this.wholesale_id
								})
							})
						})
						.catch((response) => {
							console.log(response)
							this.loading = false
							this.payLoading = false

						})
					return
					// #endif

					// #ifdef APP-VUE
					this.$http.post('pay', {
							pay_type: 1,
							trade_type: 'app',
							order_group: 'wholesale',
							data: JSON.stringify({
								"log_id": this.log.id
							})
						})
						.then((response) => {
							console.log(response)

							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: response.data.data.config,
								success: (e) => {
									this.payLoading = false
									this.$common.showSuccess('支付成功', (r) => {
										uni.redirectTo({
											url: "/pages/member/wholesale/detail?id=" + this.wholesale_id
										})
									})
								},
								fail: (e) => {
									console.log("fail", e);
									uni.showModal({
										content: "支付失败,原因为: " + e.errMsg,
										showCancel: false
									})

									this.payLoading = false
								},
								complete: () => {
									this.payLoading = false
								}
							})
						})
						.catch((response) => {
							console.log((response))
							this.loading = false
							this.payLoading = false
						})
					// #endif

				} else {
					this.$common.showError('请选择正确的支付方式')
				}
			},

			goStore(merchant) {
				if (merchant.type == 1) {
					uni.navigateTo({
						url: "/merchantPackages/pages/store?id=" + merchant.id
					})
				}
			},
			showLocation() {
				// console.log(this.detail.merchant.longitude+'-'+this.detail.merchant.latitude)
				uni.openLocation({
					longitude: parseFloat(this.detail.wholesaleProduct.product.merchant.longitude),
					latitude: parseFloat(this.detail.wholesaleProduct.product.merchant.latitude),
					success: (res) => {},
					fail: (error) => {
						this.$common.showError(error)
					}
				})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/pages/shop/marketing/wholesale?id=' + this.id
			if (this.member) path += "&share_id=" + this.member.id
			return {
				title: this.detail.name,
				imageUrl: this.detail.picture,
				path: path
			}
		},
		onPullDownRefresh() {
			this.getProduct()
		},
		onReachBottom() {
			// this.$refs.guessYouLikeView.getProduct()
		}
	}
</script>

<style>
	.vtop {
		box-shadow: none;
		background-color: none;
	}

	.product-swiper .vtop {
		right: 20rpx;
		top: 20rpx;
		z-index: 65;
	}

	.vtop .cuIcon {
		background-color: rgb(0, 0, 0, 0.5);
		color: #FFF;
		border-radius: 50%;
		padding: 10rpx 12rpx;
	}

	.vtop .content {
		display: none;
	}

	.swiper-dot-view {
		right: 0;
		bottom: 10rpx;
		background-color: rgb(0, 0, 0, 0.3);
		border-radius: 20rpx 0 0 20rpx;
		padding: 5rpx 20rpx;
	}

	.share {
		border-radius: 0;
		font-size: 30rpx;
		padding: 0;
		background: none;
	}

	.share::after {
		display: none;
	}

	.product-name {
		line-height: 45rpx;
		text-align: justify;
	}

	.heightover {
		height: 100vh;
		overflow: hidden;
	}

	.border-radius-top {
		border-radius: 30rpx 30rpx 0 0 !important;
	}

	.color-view {
		width: 80rpx;
		height: 40rpx;
	}

	.cu-bar.tabbar.shop .action {
		width: 100upx;
	}

	.round-left {
		border-radius: 40rpx 0 0 40rpx;
	}

	.round-right {
		border-radius: 0 40rpx 40rpx 0;
	}

	.main-ctr {
		position: fixed;
		z-index: 99;
		bottom: 140rpx;
		right: 30rpx;
	}

	.blackbg {
		background-color: rgb(0, 0, 0, 0.5);
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.errorview {
		height: 50vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.menu .content {
		width: 100rpx;
		min-width: 100rpx;
	}

	.text-justify {
		text-align: justify;
	}

	.sharebtn {
		background-color: unset;
		font-size: unset;
		padding: 0;
		display: inline;
	}

	.sharebtn::after {
		content: unset;
	}
</style>
